<template>
  <view class="wrap">
    <view class="hd">
      <view class="nowPhone">当前账号绑定的手机号</view>
      <view class="phone">{{ userInfo.mobile }}</view>
    </view> 
    <view class="list">
      <view class="item">
        <view class="left">姓名</view>
        <view class="right">
          <uv-input placeholder="请填写" border="none" v-model="name" fontSize='32rpx' color='#333' placeholderStyle='font-size: 32rpx;color: #B8B8B8'></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left">身份证号</view>
        <view class="right">
          <uv-input type='number' placeholder="请填写" border="none" v-model="id_card" fontSize='32rpx' color='#333' placeholderStyle='font-size: 32rpx;color: #B8B8B8'></uv-input>
        </view>
      </view>
    </view>
    <view class="desc">*请输入与手机号实名相同的身份证号</view>
    
    <view class="footer">
      <button class="btn" hover-class="none" @click="keyUp">实名认证</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref, computed } from "vue"
import { useUser } from '@/store';
import { toast, getUser } from '@/common';
import { post } from '@/api';
const aliyunVerify = uni.requireNativePlugin('AP-FaceDetectModule');
// const userInfo = computed(() => {
//   const store = useUser();
//   return uni.$uv.deepClone(store.userInfo);
// });
const store = useUser();
const userInfo = uni.$uv.deepClone(store.userDetail);
let name = ref('');
let id_card = ref('');

function keyUp(){
  if(!name.value) return toast('请输入姓名');
  if(!id_card.value) return toast('请输入身份证号码');
  if(!uni.$uv.test.idCard(id_card.value)) return toast('请输入正确的身份证号码');
  
  const meta = aliyunVerify.getMetaInfo();
  const params = {
    name: name.value,
    id_card: id_card.value,
    meta_info: meta
  }
  console.log(params);
  
  post('api/user/initRealAuth', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      const { certifyId } = data;
      aliyunVerify.verify({
        certifyId: certifyId,		// 填写从服务端获取的certifyId
      }, function(response){
        if(response.code == 1000){
          setVerify();
        }else{
          toast('实名认证失败');
        }
      });
    }
  })
}
function setVerify(){
  const params = {
    name: name.value,
    id_card: id_card.value
  }
  post('api/user/realNameAuth', params).then( res => {
    if(res.code == 1){
      getUser().then(rn => {
        getUserInfoDetail();
      })
    }
  })
}
function getUserInfoDetail(){
  const params = {
    access_user_id: userInfo.id
  }
  post('api/user/getUserDetail', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      uni.setStorageSync('userDetail', data);
      useUser().setUserDetail(data);
      toast("认证成功");
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn{
      font-size: 34rpx;
    }
  }
  .desc{
    padding: 0 30rpx;
    padding-top: 40rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
  .list{
    margin-top: 20rpx;
    padding: 0 30rpx;
    background-color: #fff;
    .item{
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;
      .right{
        flex: 1;
        width: 0;
      }
      .left{
        width: 160rpx;
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
      }
    }
  }
  .hd{
    height: 188rpx;
    width: 100%;
    padding: 0 30rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    .phone{
      font-weight: 500;
      font-size: 48rpx;
      color: #2B2B2B;
    }
    .nowPhone{
      font-weight: 400;
      font-size: 28rpx;
      color: #737373;
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>